 /*
 * @description: 商家物料详情编辑
 * @Author: along
 * @Date: 2021-03-16
 * @Last Modified by: along
 * @Last Modified time: 2021-03-16
 */
<template>
    <div
        class="shopMaterielEdit"
        v-loading="loading"
    >
        <div v-if="JSON.stringify(formData) !== '{}'">
            <p class="title">修改商家物料清单</p>
            <div class="_nav">
                <div class="_nav_left">
                    <p
                        class="_nav_status"
                        :style="{color: formData.status == 1 ? 'rgba(255, 183, 38, 1)' : formData.status == 2 ? 'rgba(47, 189, 179, 1)' : formData.status == -1 ? 'rgba(249, 91, 86, 1)' : '#333'}"
                    >{{ formData.status | filterStatus }}</p>
                    <p
                        class="_nav_reson"
                        v-if="formData.status == 1"
                    >
                        商家已提交,请尽快审核～
                    </p>
                    <p
                        class="_nav_reson"
                        v-if="formData.status == 2"
                    >
                        该物料清单已经通过审核,可点击下方按钮进行导出、查看物流信息、修改
                    </p>
                    <p
                        class="_nav_reson"
                        v-if="formData.status == -1"
                    >
                        不通过原因: {{ formData.audit_reason ? formData.audit_reason : '--' }}
                    </p>
                </div>
                <div
                    class="_nav_right"
                    @click="$refs.materielRecord.show()"
                >
                    查看操作记录
                </div>
            </div>

            <!-- 表单内容 -->
            <div class="form">
                <el-form
                    :model="ruleForm"
                    ref="materielBerValidateForm"
                    label-width="100px"
                    :rules="rules"
                    label-position="top"
                    class="demo-ruleForm"
                >
                    <p class="form_title">
                        基本信息
                    </p>
                    <div class="_items">
                        <el-form-item
                            label="公司名称"
                            prop="company_name"
                            :rules="[
                                { required: true, message: '请填写公司名称', trigger: 'blur' }
                            ]"
                        >
                            <el-input
                                v-model="ruleForm.company_name"
                                size="medium"
                                :style="{width: '332px'}"
                                :disabled="true"
                            />
                        </el-form-item>
                        <el-form-item
                            label="掌大商城店铺名称"
                            prop="shop_title"
                            :rules="[
                                { required: true, message: '请填写掌大商城店铺名称', trigger: 'blur' }
                            ]"
                            class="form_left32 form_title2"
                        >
                            <p
                                class="shop_title"
                                :style="{left: '122px', top: '-24px'}"
                            >
                                (如：阿迪达斯官方旗舰店)
                            </p>
                            <el-input
                                v-model="ruleForm.shop_title"
                                size="medium"
                                :style="{width: '332px'}"
                                :disabled="true"
                            />
                        </el-form-item>
                    </div>
                    <div class="_items">
                        <el-form-item
                            label="联系人姓名"
                            prop="user_name"
                            :rules="[
                                { required: true, message: '请填写联系人姓名', trigger: 'blur' }
                            ]"
                        >
                            <el-input
                                v-model="ruleForm.user_name"
                                size="medium"
                                :style="{width: '332px'}"
                            />
                        </el-form-item>
                        <el-form-item
                            label="联系人电话"
                            prop="user_phone"
                            :rules="[
                                { required: true, message: '请填写联系人电话', trigger: 'blur' }
                            ]"
                            class="form_left32"
                        >
                            <el-input
                                v-model="ruleForm.user_phone"
                                size="medium"
                                :style="{width: '332px'}"
                            />
                        </el-form-item>
                    </div>

                    <!-- 商品信息 -->
                    <p
                        class="form_title"
                        :style="{marginTop: '40px'}"
                    >
                        商品信息
                    </p>
                    <el-button
                        size="medium"
                        :style="{width: '106px', marginTop: '24px'}"
                        type="primary"
                        @click="$refs.materielChangeShop.show(1, requestUrl, typeList, 1)"
                    >
                        修改商品
                    </el-button>
                    <div class="_items">
                        <el-form-item
                            label="商品名称"
                            prop="goods_title"
                            :rules="[
                                { required: true, message: '请填写商品名称', trigger: 'blur' }
                            ]"
                            class="form_title2"
                        >
                            <p
                                class="shop_title"
                                :style="{left: '70px', top: '-24px'}"
                            >
                                (与上架商品名称一致)
                            </p>
                            <el-input
                                v-model="ruleForm.goods_title"
                                size="medium"
                                :style="{width: '696px'}"
                                :disabled="true"
                            />
                        </el-form-item>
                        <el-form-item
                            label="商品ID"
                            prop="goods_no"
                            :rules="[
                                { required: true, message: '请填写商品ID', trigger: 'blur' }
                            ]"
                            class="form_left32 form_title2"
                        >
                            <p
                                class="shop_title"
                                :style="{left: '52px', top: '-24px'}"
                            >
                                (如：ID: go_c81e1570f01e00)
                            </p>
                            <el-input
                                v-model="ruleForm.goods_no"
                                size="medium"
                                :style="{width: '332px'}"
                                :disabled="true"
                            />
                        </el-form-item>
                    </div>
                    <div class="_items">
                        <el-form-item
                            label="商品在其他平台(淘宝、京东)最低售价"
                            prop="goods_price"
                            :rules="[
                                { required: true, message: '请填写最低售价', trigger: 'blur' }
                            ]"
                        >
                            <el-input
                                v-model="ruleForm.goods_price"
                                size="medium"
                                :style="{width: '332px'}"
                            />
                            <p class="goods_price_logo">元</p>
                        </el-form-item>
                        <el-form-item
                            label="商品在掌大售价/团购优惠"
                            prop="tuan_price"
                            :rules="[
                                { required: true, message: '请填写商品在掌大售价/团购优惠', trigger: 'blur' }
                            ]"
                            class="form_left32"
                        >
                            <el-input
                                v-model="ruleForm.tuan_price"
                                size="medium"
                                :style="{width: '332px'}"
                            />
                            <p class="goods_price_logo">元</p>
                        </el-form-item>
                    </div>
                    <div class="_items">
                        <el-form-item
                            label="商品正装数量"
                            prop="goods_number"
                            :rules="[
                                { required: true, message: '请填写商品正装数量', trigger: 'blur' }
                            ]"
                            class="form_title2"
                        >
                            <p
                                class="shop_title"
                                :style="{left: '92px', top: '-24px'}"
                            >
                                (100个寝室，至少3件正装，以此类推)
                            </p>
                            <el-input
                                v-model="ruleForm.goods_number"
                                size="medium"
                                :style="{width: '332px'}"
                            />
                            <p class="goods_price_logo">件</p>
                        </el-form-item>
                        <el-form-item
                            label="小样/福利/礼品数量"
                            prop="goods_small_number"
                            :rules="[
                                { required: true, message: '请填写小样/福利/礼品数量', trigger: 'blur' }
                            ]"
                            class="form_left32 form_title2"
                        >
                            <p
                                class="shop_title"
                                :style="{left: '132px', top: '-24px'}"
                            >
                                (参考：100个寝室，100件小样)
                            </p>
                            <el-input
                                v-model="ruleForm.goods_small_number"
                                size="medium"
                                :style="{width: '332px'}"
                            />
                            <p class="goods_price_logo">件</p>
                        </el-form-item>
                    </div>
                    <div class="_items">
                        <el-form-item
                            label="商品主图"
                            prop="goods_image_list"
                        >
                            <div class="items_images">
                                <draggable
                                    v-model="ruleForm.goods_image_list"
                                    :style="{display: 'flex', flexWrap: 'wrap'}"
                                >
                                    <div
                                        class="items_images_wrap"
                                        v-for="(option,index) in ruleForm.goods_image_list"
                                        :key="index"
                                    >
                                        <img
                                            :src="option"
                                            class="item_img"
                                            @click="fnShowPreview(ruleForm.goods_image_list)"
                                        >
                                        <p
                                            class="el-icon-error-wrap"
                                            @click="handleDeleteImages(index)"
                                        >
                                            <i
                                                class="el-icon-error"
                                            />
                                        </p>
                                    </div>
                                </draggable>
                                <div v-if="ruleForm.goods_image_list.length < 9">
                                    <el-upload
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :show-file-list="false"
                                        :http-request="e=> {fnUploadImageOfCustomerLogo(e, true)}"
                                        accept="image/*"
                                        :multiple="true"
                                        :limit="9"
                                        class="upload-good-image"
                                        :on-exceed="beforeUploadExcwwd"
                                    >
                                        <img
                                            src="http://cdn.zsdx.cn/phaadmin/upload_images_logo.png"
                                            class="item_upload_bg"
                                        >
                                    </el-upload>
                                </div>
                            </div>
                            <p class="items_images_desc">
                                建议尺寸300*300px，最多9张，支持jpg、jpeg、png
                            </p>
                        </el-form-item>
                    </div>

                    <!-- 寄回信息 -->
                    <p
                        class="form_title"
                        :style="{marginTop: '40px'}"
                    >
                        寄回信息
                    </p>
                    <div class="form_adress">
                        <el-checkbox v-model="ruleForm.is_send">商品需要寄回</el-checkbox>
                    </div>

                    <!-- 是否展示收件信息 -->
                    <template v-if="ruleForm.is_send">
                        <div class="_items ml24">
                            <el-form-item
                                label="寄回地址"
                                prop="detail_info"
                                :rules="[
                                    { required: true, message: '请填写商品的寄回地址', trigger: 'blur' }
                                ]"
                            >
                                <el-input
                                    v-model="ruleForm.detail_info"
                                    size="medium"
                                    placeholder="请输入商品寄回的地址"
                                    :style="{width: '696px'}"
                                />
                            </el-form-item>
                        </div>
                        <div class="_items ml24">
                            <el-form-item
                                label="收件人姓名"
                                prop="detail_user_name"
                                :rules="[
                                    { required: true, message: '请填写收件人姓名', trigger: 'blur' }
                                ]"
                            >
                                <el-input
                                    v-model="ruleForm.detail_user_name"
                                    size="medium"
                                    placeholder="请输入收件人姓名"
                                    :style="{width: '332px'}"
                                />
                            </el-form-item>
                            <el-form-item
                                label="收件人电话"
                                prop="detail_user_phone"
                                :rules="[
                                    { required: true, message: '请填写收件人电话', trigger: 'blur' }
                                ]"
                                class="form_left32"
                            >
                                <el-input
                                    v-model="ruleForm.detail_user_phone"
                                    size="medium"
                                    placeholder="请输入收件人电话"
                                    :style="{width: '332px'}"
                                />
                            </el-form-item>
                        </div>
                    </template>

                    <!-- 推广要求 -->
                    <p
                        class="form_title"
                        :style="{marginTop: '40px'}"
                    >
                        推广要求
                    </p>
                    <div class="_items">
                        <el-form-item
                            label="推广寝室数"
                            prop="school_numbers"
                            :rules="[
                                { required: true, message: '请填写推广寝室数', trigger: 'blur' }
                            ]"
                        >
                            <el-input
                                v-model="ruleForm.school_numbers"
                                size="medium"
                                placeholder="请填写推广寝室数"
                                :style="{width: '332px'}"
                            />
                        </el-form-item>
                        <el-form-item
                            label="男女寝室性别要求"
                            prop="school_sex"
                            :rules="[
                                { required: true, message: '请选择男女寝室性别要求', trigger: 'blur' }
                            ]"
                            class="form_left32"
                        >
                            <el-select
                                v-model="ruleForm.school_sex"
                                clearable
                                filterable
                                size="medium"
                                placeholder="请选择"
                                :style="{width: '332px'}"
                            >
                                <el-option
                                    v-for="item in sexList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="_items">
                        <el-form-item
                            label="商品引导话术"
                            prop="shop_discourse"
                            :rules="[
                                { required: true, message: '请填写商品引导话术', trigger: 'blur' }
                            ]"
                            class="form_title2"
                        >
                            <el-popover
                                placement="top-start"
                                width="300"
                                trigger="hover"
                                content="这是“金丝猴”新推出一款榴莲饼，大家一起品尝品尝， 真实榴莲成分、双陷混合高达80%，现在下单3包赠送60包手帕纸。"
                                class="shop_title"
                                :style="{left: '95px', top: '-36px'}"
                            >
                                <el-button
                                    slot="reference"
                                    type="text"
                                >查看示例</el-button>
                            </el-popover>
                            <el-input
                                type="textarea"
                                placeholder="请填写商品引导话术"
                                v-model="ruleForm.shop_discourse"
                                maxlength="300"
                                show-word-limit
                                :style="{width: '696px'}"
                                :autosize="{ minRows: 5, maxRows: 7}"
                            />
                        </el-form-item>
                    </div>
                    <div class="_items">
                        <el-form-item
                            label="商品常见FAQ"
                            prop="shop_problem"
                            :rules="[
                                { required: true, message: '请填写商品常见FAQ', trigger: 'blur' }
                            ]"
                            class="form_title2"
                        >
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                class="shop_title"
                                :style="{left: '95px', top: '-36px'}"
                            >
                                <p>
                                    举例<br>
                                    &nbsp;&nbsp;1、价格优势<br>
                                    &nbsp;&nbsp;2、活动/团购<br>
                                    &nbsp;&nbsp;3、产品亮点
                                </p>
                                <el-button
                                    slot="reference"
                                    type="text"
                                >查看示例</el-button>
                            </el-popover>
                            <el-input
                                type="textarea"
                                placeholder="请填写商品常见FAQ"
                                v-model="ruleForm.shop_problem"
                                maxlength="300"
                                show-word-limit
                                :style="{width: '696px'}"
                                :autosize="{ minRows: 5, maxRows: 7}"
                            />
                        </el-form-item>
                    </div>
                    <div class="_items">
                        <el-form-item
                            label="其他备注要求"
                        >
                            <el-input
                                type="textarea"
                                placeholder="选填"
                                v-model="ruleForm.remark"
                                maxlength="300"
                                show-word-limit
                                :style="{width: '696px'}"
                                :autosize="{ minRows: 5, maxRows: 7}"
                            />
                        </el-form-item>
                    </div>
                </el-form>
            </div>

            <!-- 操作按钮 -->
            <div class="_foot">
                <el-button
                    size="medium"
                    type="default"
                    :style="{width: '120px',marginRight: '32px'}"
                    @click="$refs.cancelDialog.showDialog()"
                >
                    取消
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    :style="{width: '120px'}"
                    @click="handleSubmitForm('materielBerValidateForm')"
                >
                    提交
                </el-button>
            </div>
        </div>

        <!-- 查看操作记录 -->
        <materiel-record
            ref="materielRecord"
            :material_no="no"
        />

        <!-- 选择商品 -->
        <goods-select
            ref="materielChangeShop"
            @change="getCouponChangeShop"
        />

        <!-- 图片预览 -->
        <img-preview ref="preview" />

        <!-- 取消修改弹窗 -->
        <cancel-dialog
            ref="cancelDialog"
            :url="'http://cdn.zsdx.cn/student-app/images/dialog_logo.png'"
            :title="'温馨提示'"
            :content="'当前页面填写的信息还未提交，离开后将重新填写，是否离开？'"
            @confrim="confirmDialogForm"
        />
    </div>
</template>

<script>
import materielRecord from '@/components/bid/materiel-record.vue';
import GoodsSelect from '@/components/goods/goods-select';
import imgPreview from '@/components/common/img-preview';
import draggable from 'vuedraggable';
import cancelDialog from '@/components/dialog/index.vue';
export default {
    components: {
        materielRecord,
        GoodsSelect,
        imgPreview,
        draggable,
        cancelDialog
    },
    data () {
        const validImages = (rule, value, callback) => {
            if(value.length){
                callback();
            } else {
                callback(new Error('请上传商品主图'));
            }
        };

        return {
            no: '',
            material_name: '',//产品名称
            formData: {
                status: '', //1:待审核 2:已通过 3:未通过
                audit_reason: ''
            },
            ruleForm: {
                company_name: '',//公司名称
                shop_title: '',//掌大商城店铺名称
                user_name: '',//联系人姓名
                user_phone: '',//联系电话
                goods_title: '',//商品名称
                goods_no: '',//商品id
                goods_price: '',//商品在其他平台(淘宝、京东)最低售价
                tuan_price: '',//商品在掌大售价/团购优惠
                goods_number: '',//商品正装数量
                goods_small_number: '',//小样/福利/礼品数量
                goods_image_list: [],//商品主图
                is_send: true,//是否需要寄回 1:是 0:否
                detail_info: '',//寄回收件地址
                detail_user_name: '',//收件人姓名
                detail_user_phone: '',//收件人电话
                school_numbers: '',//推广寝室数
                school_sex: 3,//男女寝室要求
                shop_discourse: '',//商品引导话术
                shop_problem: '',//商品常见FQA
                remark: ''//其他备注要求
            },
            rules: {
                goods_image_list: [
                    { required: true, message: '请上传商品主图', trigger: 'blur' },
                    { validator: validImages, trigger: 'blur' }
                ]
            },
            sexList: [{value: 1, label: '男'},{value: 2, label: '女'},{value: 0, label: '不限'}],
            loading: false,
            //上传图片相关
            fileList: [],
            // 商品选择相关
            typeList: [
                {label: '自营', value: 1},
                {label: '折扣专区', value: 5},
                {label: '秒杀', value: 3},
                {label: '淘宝', value: 2},
                {label: '京东', value: 11},
                {label: '拼多多', value: 12},
            ],
            requestUrl: '',
        };
    },
    filters: {
        filterStatus (val) {
            if(val === 1) return '待审核';
            if(val === 2) return '审核通过';
            if(val === -1) return '未通过';
        }
    },
    mounted () {
        // this.loading = true;
        let query = this.$route.query;

        this.no = query.no ? query.no : '';
        this.material_name = query.material_name ? query.material_name : '';
        this.$store.commit('SET_HEADER', [{ title: "官网"},{title: '商家增值服务'},
            {title: '商家物料清单列表', path: '/bid/shop-materiel'},
            {title: '商家物料详情', path: `/bid/shop-materiel-info?no=${query.no}&material_name=${query.material_name}`},
            {title: '修改物料清单'}]);
        this.getInfo();
    },
    methods: {
        getInfo () {
            this.$post('/student/hire_room_series_material%5Cget', {
                material_no: this.no
            }, resp => {
                if (resp.code == 1) {
                    this.$set(this.formData, 'status', resp.data.status);
                    this.$set(this.formData, 'audit_reason', resp.data.audit_reason);

                    const goods_images = resp.data.goods_images.split(',');

                    this.ruleForm = {
                        company_name: resp.data.company_name,//公司名称
                        shop_title: resp.data.shop_title,//掌大商城店铺名称
                        user_name: resp.data.contact_name,//联系人姓名
                        user_phone: resp.data.contact_phone,//联系电话
                        goods_title: resp.data.goods_title,//商品名称
                        goods_no: resp.data.goods_no,//商品id
                        goods_price: resp.data.other_price,//商品在其他平台(淘宝、京东)最低售价
                        tuan_price: resp.data.price,//商品在掌大售价/团购优惠
                        goods_number: resp.data.goods_count,//商品正装数量
                        goods_small_number: resp.data.gift_count,//小样/福利/礼品数量
                        goods_image_list: goods_images,//商品主图
                        is_send: resp.data.need_return === 1 ? true : false,//是否需要寄回 1:是 0:否
                        detail_info: resp.data.return_address_info,//寄回收件地址
                        detail_user_name: resp.data.return_address_username,//收件人姓名
                        detail_user_phone: resp.data.return_address_phone,//收件人电话
                        school_numbers: resp.data.room_series_count,//推广寝室数
                        school_sex: resp.data.room_series_sex,//男女寝室要求
                        shop_discourse: resp.data.goods_guide_desc,//商品引导话术
                        shop_problem: resp.data.goods_faq,//商品常见FQA
                        remark: resp.data.goods_requirement//其他备注要求
                    };
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 确定取消
         */
        confirmDialogForm () {
            this.$router.push({
                name: 'shopMaterielInfo',
                query: {
                    no: this.no,
                    material_name: this.material_name
                }
            });
        },

        /**
         * @description 提交
         */
        handleSubmitForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {

                    const data = {
                        material_no: this.no,
                        material_name: this.material_name,
                        contact_name: this.ruleForm.user_name,
                        contact_phone: this.ruleForm.user_phone,
                        price: this.ruleForm.tuan_price,
                        other_price: this.ruleForm.goods_price,
                        goods_count: this.ruleForm.goods_number,
                        gift_count: this.ruleForm.goods_small_number,
                        goods_images: this.ruleForm.goods_image_list.join(),
                        room_series_count: this.ruleForm.school_numbers,
                        room_series_sex: this.ruleForm.school_sex,
                        goods_guide_desc: this.ruleForm.shop_discourse,
                        goods_faq: this.ruleForm.shop_problem,
                        goods_requirement: this.ruleForm.remark,
                        need_return: this.ruleForm.is_send ? 1 : 0,
                        return_address_username: this.ruleForm.is_send ? this.ruleForm.detail_user_name : '',
                        return_address_phone: this.ruleForm.is_send ? this.ruleForm.detail_user_phone : '',
                        return_address_info: this.ruleForm.is_send ? this.ruleForm.detail_info : '',
                        goods_no: this.ruleForm.goods_no
                    };

                    this.$post('/student/hire_room_series_material%5Cupdate', {
                        ...data
                    }, resp => {
                        if (resp.code == 1) {
                            this.$notify({
                                title: '提示',
                                message: '修改成功',
                                type: 'success',
                                duration: 2000
                            });

                            setTimeout(() => {
                                this.confirmDialogForm();
                            },500);
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                type: 'warning',
                                duration: 2000
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        /**
         * @description 获取选择商品信息
         */
        getCouponChangeShop (obj) {
            /*const length = obj.list && obj ? obj.list.length : 0;

            if(length > 1) {
                this.$notify({
                    title: '提示',
                    message: '最多只可以选择一个商品',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }*/

            // 获取商品信息回填(商品名称/商品编号/最低售价)
            this.$set(this.ruleForm, 'goods_title', obj['goods_title']);
            this.$set(this.ruleForm, 'goods_no', obj['goods_no']);
            // this.$set(this.ruleForm, 'goods_price', obj.list[0]['goods_price']);
            // this.$set(this.ruleForm, 'company_name', obj.list[0]['company_name']);
            // this.$set(this.ruleForm, 'shop_title', obj.list[0]['shop_title']);
            // this.$set(this.ruleForm, 'goods_image_list', [
            //     obj.list[0]['goods_cover']
            // ]);
        },

        /**
         * @deprecated 上传图片
         */
        fnUploadImage(e, success, error) {
            let timeTmp = new Date().getTime();
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },
        fnUploadImageOfCustomerLogo(e) {
            this.fnUploadImage(e, (resp) => {
                this.$set(this.ruleForm, 'goods_image_list', this.ruleForm.goods_image_list.concat(resp.data.url));
            }, (resp) => {
                console.log(resp.msg);
            });
        },

        /**
         * @description 文件超出个数限制时的钩子
         */
        beforeUploadExcwwd (files, fileList) {
            this.$notify({
                title: '提示',
                message: `最多只可以上传9个商品主图`,
                type: 'warning',
                duration: 2000
            });
            return false;
        },

        /**
         * @description 删除图片
         */
        handleDeleteImages (index) {
            this.ruleForm.goods_image_list.splice(index, 1);
        },

        /**
         * @description 查看图片
         * @param   {String}    images    单图预览
         * @param   {Array}     images     多图预览
         */
        fnShowPreview(images) {
            if(images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images);
            } else {
                this.$notify({
                    title: '提示',
                    message: '图片类型错误',
                    type: 'warning',
                    duration: 2000
                });
            }
        },
    }
};
</script>
<style lang="less" scoped>
.shopMaterielEdit {
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    margin: 12px;
    overflow: hidden;
    overflow-y: auto;
    background: #ffffff;
    &::-webkit-scrollbar {
        width: 3px;
    }
    .title {
        width: 100%;
        height: 66px;
        line-height: 66px;
        box-sizing: border-box;
        padding-left: 24px;
        color: rgba(51, 51, 51, 1);
        font-size: 18px;
        font-weight: 500;
    }
    ._nav {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        padding: 0 32px 0px 56px;
        border-bottom: 1px rgba(240, 242, 245, 1) solid;
        justify-content: space-between;
        ._nav_left {
            display: flex;
            flex-direction: column;
            // height: 40px;
            width: calc(100% - 200px);
            ._nav_status {
                font-size: 16px;
                font-weight: 500;
                height: 16px;
            }
            ._nav_reson {
                color: rgba(153, 153, 153, 1);
                font-size: 12px;
                margin-top: 13px;
                // height: 13px;
                width: calc(100% - 1px);
                margin-bottom: 24px;
                line-height: 20px;
            }
        }
        ._nav_right {
            width: 92px;
            height: 26px;
            border: 1px rgba(32, 160, 255, 1) solid;
            border-radius: 13px;
            text-align: center;
            line-height: 26px;
            cursor: pointer;
            color: rgba(32, 160, 255, 1);
            font-size: 12px;
        }
    }
    .form {
        width: calc(100% - 48px);
        margin: 24px 24px 32px 24px;
        background: #FBFBFB;
        border: 1px #EEEEEE solid;
        border-radius: 2px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 20px 32px 24px 32px;
        overflow: hidden;
        min-width: 1100px;
        overflow-x: auto;
        .form_title {
            height: 40px;
            width: 100%;
            color: rgba(51, 51, 51, 1);
            font-size: 16px;
            font-weight: 500;
            line-height: 40px;
            border-bottom: 1px rgba(233, 233, 233, 1) solid;
        }
        ._items {
            width: 100%;
            display: flex;
            // border: 1px red solid;
            .form_left32 {
                margin-left: 32px;
            }
            .form_title2 {
                position: relative;
                .shop_title {
                    position: absolute;
                    color: rgba(153, 153, 153, 1);
                    font-size: 14px;
                    z-index: 99;
                    height: 15px;
                    line-height: 15px;
                }
            }
            .items_images {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                // border: 1px red solid;
                .items_images_wrap {
                    width: 100px;
                    height: 100px;
                    position: relative;
                    margin: 0 12px 12px 0;
                    .item_img {
                        width: 100px;
                        height: 100px;
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 1;
                        cursor: pointer;
                    }
                    .el-icon-error-wrap {
                        position: absolute;
                        top: -5px;
                        right: -3px;
                        width: 16px;
                        height: 16px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        z-index: 10;
                        background: #fff;
                        border-radius: 50%;
                        cursor: pointer;
                        .el-icon-error {
                            color: #333;
                            font-size: 18px;
                        }
                    }
                }
                .item_upload_bg {
                    width: 100px;
                    height: 100px;
                    cursor: pointer;
                }
            }
            .items_images_desc {
                color: rgba(153, 153, 153, 1);
                font-size: 14px;
                height: 15px;
                line-height: 15px;
            }
            .goods_price_logo {
                position: absolute;
                z-index: 99;
                top: 0px;
                right: 16px;
                color: rgba(194, 194, 194, 1);
                font-size: 14px;
            }
        }
        .form_adress {
            margin-top: 24px;
        }
        .ml24 {
            margin-left: 24px;
        }
    }
    ._foot {
        width: 100%;
        height: 36px;
        display: flex;
        box-sizing: border-box;
        padding-left: 56px;
        margin: 32px 0 52px 0;
    }
}
</style>
<style lang="less">
.shopMaterielEdit {
    .el-form--label-top .el-form-item__label {
        padding: 0 0 6px;
    }
    .el-form-item__label {
        line-height: 20px;
        margin-top: 24px;
        position: relative;
    }
    .el-form-item__label::before {
        display: block;
        position: absolute;
        left: -6px;
    }
    .el-form-item {
        margin-bottom: 0px;
    }
    .el-textarea__inner {
        resize: none;
    }
}
</style>
